const webpackBase = require('./webpack.config.base.js')

const merge  = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

console.log("\n生产环境\n")

module.exports =  merge( webpackBase, {
    entry: {
        vendor: ['vue', 'element-ui'],
        app: './src/main.js',
    },
    mode: 'production',
    module: {
        rules: [
            {
            test: /\.(sa|sc|c)ss$/,
            use: [
            {
                loader: MiniCssExtractPlugin.loader
            },
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: [
                    require('autoprefixer')(),
                    require('cssnano')()
                  ]
                }
            },
                'sass-loader',
                ],
            },
        ]
    },
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new CleanWebpackPlugin({
            dry: false
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css',
        }),
        new BundleAnalyzerPlugin()
    ],
    optimization: {
        splitChunks: {
           chunks: 'all'
        }
    },
    externals: {
        'vue': 'Vue',
        "element-ui": "ELEMENT",
    }
})